<!--
 * @Author: 刘苗
 * @Description: 表单
 * @Date: 2021-08-26 13:54:20
-->
<template>
  <div class="baseform_container">
    <el-form
      ref="form"
      :model="form"
      :inline="inline || false"
      :size="size || 'small'"
      :label-width="labelWidth || '120px'"
    >
      <el-form-item
        v-for="(item, index) in fromIems"
        :key="index"
        :label="item.label + '：'"
        :prop="item.dataIndex"
        :rules="item.rules || []"
        v-if="!item.hide || item.hide(form)"
      >
        <!-- 普通输入 -->
        <template v-if="item.valueType === 'input'">
          <el-input
            v-model="form[item.dataIndex]"
            :style="item.props ? item.props.style : { width: '220px' }"
            :placeholder="item.props ? item.props.placeholder : '请输入'"
          ></el-input>
        </template>

        <!-- 下拉 -->
        <template v-if="item.valueType === 'select'">
          <el-select
            v-model="form[item.dataIndex]"
            :value-key="item.props ? item.props.valueKey : ''"
            :placeholder="item.props ? item.props.placeholder : '请选择入'"
            :clearable="item.props ? item.props.clearable : false"
            :filterable="item.props ? item.props.filterable : false"
            @change="item.onChange && item.onChange(form[item.dataIndex])"
          >
            <el-option
              v-for="el in item.options"
              :key="el.value"
              :label="el.label"
              :value="el.value"
            >
            </el-option>
          </el-select>
        </template>

        <!-- 数字 -->
        <template v-if="item.valueType === 'inputNumber'">
          <el-input-number
            v-model="form[item.dataIndex]"
            controls-position="right"
            :min="item.props ? item.props.min : 0"
            :max="item.props ? item.props.max : 99999999"
            :style="item.props ? item.props.style : { width: '220px' }"
          ></el-input-number>
        </template>

        <!-- 开关 -->
        <template v-if="item.valueType === 'switch'">
          <el-switch
            v-model="form[item.dataIndex]"
            :active-text="item.props ? item.props.activeText : '启用'"
            :inactive-text="item.props ? item.props.inactiveText : '禁用'"
            @change="item.onChange && item.onChange(form[item.dataIndex])"
          >
          </el-switch>
        </template>

        <!-- 日期 -->
        <template v-if="item.valueType === 'datePicker'">
          <el-date-picker
            v-model="form[item.dataIndex]"
            :type="item.props ? item.props.type : 'date'"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </template>

        <!-- 单选 -->
        <template v-if="item.valueType === 'radio'">
          <el-radio-group v-model="form[item.dataIndex]">
            <el-radio
              v-for="(el, index) in item.options"
              :label="el.value"
              :key="index"
              >{{ el.label }}</el-radio
            >
          </el-radio-group>
        </template>

        <!-- 多选 -->
        <template v-if="item.valueType === 'checkbox'">
          <el-checkbox-group
            v-model="form[item.dataIndex]"
          >
            <el-checkbox
              v-for="(el, index) in item.options"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
      </el-form-item>

      <!-- <el-form-item>
        <el-button type="primary" @click="handleSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>


<script>
export default {
  name: "baseFrom",
  props: ["fromIems", "inline", "size", "labelWidth"],
  data() {
    return {
      form: {},
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>



<style lang="scss" scoped>
</style>